import {
  IFormProps,
  size,
  formItemLayout,
  getUploadResult,
  productPage,
  getImages,
  getFileList
} from "../../utils/common";
import React from "react";
import {
  Modal,
  Form,
  Input,
  Select,
  Upload,
  Checkbox,
  InputNumber
} from "antd";
import * as api from "../../api/api";
import { FormComponentProps } from "antd/lib/form";
import Uploads from "../Uploads";
import item from "../../models/item";
const TextArea = Input.TextArea;
const vipSale = 0.8;
export interface IItemSpecEditProps extends FormComponentProps {
  visible: boolean;
  item: api.SingleUserMallItemsVOItemVO;
  itemSpec: api.SingleUserMallItemsVOItemSpecVO;
  onSave: (any) => void;
  onCancel: () => void;
}
class ItemSpecEdit extends React.PureComponent<IItemSpecEditProps, any> {
  constructor(props) {
    super(props);
  }

  state = {
    fileList: []
  };

  componentDidMount() {
    const images = this.props.itemSpec && this.props.itemSpec.picture;
    this.setState({ fileList: getFileList(images) });
  }

  ok = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, form) => {
      if (!err) {
        form["picture"] = getImages(this.state.fileList);
        form["vipPrice"] = form["price"];
        form["superVipPrice"] = form["price"];
        this.props.onSave(form);
      }
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  cancel = () => {
    this.props.onCancel();
  };

  imageChange = fileList => {
    this.setState({ fileList });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { item, itemSpec } = this.props;
    return (
      <Modal
        title="商品规格信息"
        visible={this.props.visible}
        onOk={this.ok}
        onCancel={this.cancel}
        maskClosable={true}
      >
        <Form>
          <Form.Item label="规格名称" {...formItemLayout}>
            {getFieldDecorator("spec", {
              rules: [
                {
                  required: true,
                  message: "请输入规格名称"
                }
              ],
              initialValue: itemSpec && itemSpec.spec
            })(<Input size={size} placeholder="请输入规格名称" />)}
          </Form.Item>
          <Form.Item label="原价(元)" {...formItemLayout}>
            {getFieldDecorator("originalPrice", {
              rules: [
                {
                  required: true,
                  message: "请输入原价"
                }
              ],
              initialValue: itemSpec && itemSpec.originalPrice
            })(<InputNumber size={size} placeholder="请输入原价" />)}
          </Form.Item>
          <Form.Item
            label={item.isWholesale ? "批发价(元)" : "价格(元)"}
            {...formItemLayout}
          >
            {getFieldDecorator("price", {
              rules: [
                {
                  required: true,
                  message: "请输入价格"
                }
              ],
              initialValue: itemSpec && itemSpec.price
            })(<InputNumber size={size} placeholder="请输入价格" />)}
          </Form.Item>
          {/* <Form.Item label="批发价(元)" {...formItemLayout}>
                        {getFieldDecorator('vipPrice', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入批发价'
                                }
                            ],
                            initialValue: itemSpec && itemSpec.vipPrice
                        })(<InputNumber size={size}
                            placeholder="请输入批发价" />)}
                    </Form.Item> */}
          {item.isTimeLimit ? (
            <Form.Item label="抢购价(元)" {...formItemLayout}>
              {getFieldDecorator("limitPrice", {
                rules: [
                  {
                    required: true,
                    message: "请输入抢购价"
                  }
                ],
                initialValue: itemSpec && itemSpec.limitPrice
              })(
                <InputNumber size={size} placeholder="请输入抢购价" min={1} />
              )}
            </Form.Item>
          ) : item.isGroup ? (
            <Form.Item label="团购价(元)" {...formItemLayout}>
              {getFieldDecorator("groupPrice", {
                rules: [
                  {
                    required: true,
                    message: "请输入团购价"
                  }
                ],
                initialValue: itemSpec && itemSpec.groupPrice
              })(
                <InputNumber
                  size={size}
                  placeholder="请输入团购价"
                  min={0.01}
                />
              )}
            </Form.Item>
          ) : item.isBargain ? (
            <Form.Item label="砍价底价(元)" {...formItemLayout}>
              {getFieldDecorator("bargainPrice", {
                rules: [
                  {
                    required: true,
                    message: "请输入砍价底价"
                  }
                ],
                initialValue: itemSpec && itemSpec.bargainPrice
              })(
                <InputNumber size={size} placeholder="请输入砍价底价" min={1} />
              )}
            </Form.Item>
          ) : (
            ""
          )}

          {/* {
                        !item.isTimeLimit && !item.isGroup ?
                            (<Form.Item label="合伙人价(元)" {...formItemLayout}>
                            {getFieldDecorator('superVipPrice', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入合伙人价'
                                    }
                                ],
                                initialValue: itemSpec && itemSpec.superVipPrice
                            })(<InputNumber size={size}
                                placeholder="请输入合伙人价" />)}
                        </Form.Item>) : ""
                    } */}
          <Form.Item label="规格图片" {...formItemLayout}>
            {getFieldDecorator("pictures", {
              rules: [
                {
                  required: true,
                  message: "请上传规格图片"
                }
              ],
              initialValue: item && item.pictures
            })(
              <Uploads
                editable={true}
                isList={false}
                fileList={this.state.fileList}
                onChange={this.imageChange}
              />
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(ItemSpecEdit);
